<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "媒体舆情"
      },
      // 暂时需要登录，后续再改
      "needLogin": true
    }
    </route>

<script lang="ts" setup>
import { ref } from 'vue'
import diannao from '../static-assets/images/diannao.svg'
import jia from '../static-assets/images/jia.svg'
import yujing from '../static-assets/images/yujing.svg'
// 服务项目
const services = ref([
  {
    id: 1,
    title: '重点舆情监控',
    description: '重点舆情订阅\n一键精准追踪',
    svg: jia,
    bg_color: 'linear-gradient(312.47deg, #FFF3E4 2.49%, #FFF7EE 97.51%)',
  },
  {
    id: 2,
    title: '持续监控',
    description: '全面追踪订阅\n实时热度走势',
    svg: diannao,
    bg_color: 'linear-gradient(312.47deg, #E6F1FF 2.49%, #F1F7FF 97.51%)',
  },
  {
    id: 3,
    title: '智能预警',
    description: '异常实时提醒\n帮您快速响应',
    svg: yujing,
    bg_color: 'linear-gradient(312.47deg, #FFE9E8 2.49%, #FFEFEE 97.51%)',
  },
])

// 咨询方法
function handleConsult() {
  uni.showToast({
    title: '正在连接客服...',
    icon: 'none',
  })
  // 这里可以添加跳转到咨询页面或拨打电话等功能
}
</script>

<template>
  <view class="bg-#f5f5f5 pb-30rpx">
    <!-- 顶部banner -->
    <view class="h-350rpx overflow-hidden p-20rpx">
      <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="widthFix" :lazy-load="true" />
    </view>

    <!-- 重点舆情监控 -->
    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view class="relative z-10">
        <view class="flex">
          <view class="text-28rpx text-black font-500">
            重点舆情监控
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-3 gap-15rpx">
            <view
              v-for="service in services"
              :key="service.id"
              class="flex flex-col items-center justify-center overflow-hidden rounded-12rpx p-20rpx"
              :style="{ background: service.bg_color }"
            >
              <image
                :src="service.svg"
                mode="scaleToFill"
                class="mb-10rpx h48rpx w-48rpx"
              />
              <view class="mb-10rpx truncate text-28rpx text-#333">
                {{ service.title }}
              </view>
              <view class="line-clamp-2 text-center text-24rpx text-#333">
                {{ service.description }}
              </view>
            </view>
          </view>
        </view>
        <view class="mt-20rpx">
          <wd-button type="primary" size="large" custom-class="red_button" block @click="handleConsult">
            免费获取舆情分析报告
          </wd-button>
        </view>
      </view>
    </view>

    <view class="relative m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view class="flex">
        <view class="text-28rpx text-black font-bold">
          舆情示例
        </view>
      </view>
      <view class="mt-20rpx flex flex-col items-center justify-center rounded-2xl" style="background: linear-gradient(180deg, #FFEEED 0%, #FFFFFF 64.42%)">
        <view class="my-20rpx center">
          <image
            src="../static-assets/images/left.svg"
            mode="scaleToFill"
            class="mr-10rpx h-10rpx w-58rpx"
          />
          <view>
            方案A组情监测
          </view>
          <image
            src="../static-assets/images/right.svg"
            mode="scaleToFill"
            class="ml-10rpx h-10rpx w-58rpx"
          />
        </view>
        <view class="h-186rpx w-186rpx flex flex-col items-center justify-center rounded-full" style="background: linear-gradient(180deg, #FFF0EF 0%, #FFACA7 100%)">
          <view class="text-[48rpx]">10824</view>
          <view class="text-[24rpx]">总量</view>
        </view>
      </view>
      <view class="mt-20rpx rounded-lg bg-white p-10rpx">
        <view class="flex items-center justify-between">
          <view class="flex flex-col items-center">
            <view class="text-red-500 font-bold">
              10824
            </view>
            <view class="center text-[24rpx] text-gray-500">
              <view>负面</view>
              <image
                src="../static-assets/images/xia.svg"
                mode="scaleToFill"
                class="ml-10rpx h-16rpx w-16rpx"
              />
            </view>
          </view>
          <view class="flex flex-col items-center">
            <view class="text-[#FF8E00] font-bold">
              10824
            </view>
            <view class="center text-[24rpx] text-gray-500">
              <view>中性</view>
              <image
                src="../static-assets/images/zhong.svg"
                mode="scaleToFill"
                class="ml-10rpx h-16rpx w-16rpx"
              />
            </view>
          </view>
          <view class="flex flex-col items-center">
            <view class="text-sky-500 font-bold">
              10824
            </view>
            <view class="center text-[24rpx] text-gray-500">
              <view>正面</view>
              <image
                src="../static-assets/images/shang.svg"
                mode="scaleToFill"
                class="ml-10rpx h-16rpx w-16rpx"
              />
            </view>
          </view>
        </view>
      </view>
      <view>
        <view class="mt-20rpx rounded-lg bg-white p-10rpx">
          <view>
            <text class="mr-10rpx rounded-8rpx p-4rpx text-[20rpx] text-#fff" style="background: linear-gradient(104.6deg, #F95D60 0.87%, #DF2023 99.13%);">
              负面
            </text>
            <text class="text-[24rpx] text-#333">之前一直很相信XX家电大部分都是相信XX家电大部分都是相信XX家电大部分都是</text>
          </view>
          <view class="mt-10rpx flex items-center text-[24rpx] text-#333">
            <image
              src="../static-assets/images/xinlang.svg"
              mode="scaleToFill"
              class="mr-10rpx h-32rpx w-32rpx"
            />
            <view>新浪微博</view>
          </view>
        </view>
        <view class="mt-20rpx rounded-lg bg-white p-10rpx">
          <view>
            <text class="mr-10rpx rounded-8rpx p-4rpx text-[20rpx] text-#fff" style="background: linear-gradient(104.6deg, #F95D60 0.87%, #DF2023 99.13%);">
              负面
            </text>
            <text class="text-[24rpx] text-#333">之前一直很相信XX家电大部分都是相信XX家电大部分都是相信XX家电大部分都是</text>
          </view>
          <view class="mt-10rpx flex items-center text-[24rpx] text-#333">
            <image
              src="../static-assets/images/xinlang.svg"
              mode="scaleToFill"
              class="mr-10rpx h-32rpx w-32rpx"
            />
            <view>新浪微博</view>
          </view>
        </view>
      </view>
      <view class="mt-20rpx">
        <wd-button type="primary" size="large" custom-class="red_button" block @click="handleConsult">
          获取我的舆情专属方案
        </wd-button>
      </view>
    </view>

    <view class="m-20rpx rounded-12rpx bg-white p-20rpx">
      <view class="mb-30rpx flex items-center pl-10rpx text-32rpx font-bold">
        合作机构
      </view>
      <scroll-view scroll-x class="whitespace-nowrap px-4" style="width: auto;">
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
      </scroll-view>
    </view>
  </view>
</template>
